<style lang="less" scoped>
.orderinfo {
  font-size: 12px;
}
.grid2 {
  display: grid;
  grid-template-columns: 60px auto;
  align-items: center;
  margin-bottom: 10px;
  p {
    padding: 2px 0;
  }
}
.grid2r {
  display: grid;
  grid-template-columns: auto 60px;
  align-items: center;
}

.grid {
  padding: 15px;
}

.title {
  font-size: 18px;
  padding: 15px;
}
.wuliu {
  p {
    label {
      color: #999999;
    }
    span {
      color: #333333;
    }
  }
}
.food {
  .grid2r {
    p {
      font-size: 14px;
    }
  }
  .sub {
    color: #999999;
  }
}
.address {
  label {
    color: #333333;
  }
  span {
    color: #999999;
  }
  div {
    margin-top: 10px;
  }
}
.posi {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
}
.grid2lr {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  margin-bottom: 10px;
  .left {
    color: #999999;
  }
  .right {
    color: #333333;
    text-align: right;
  }
}
.items {
	border-bottom: 1px solid #eeeeee;
}
.style1 {
	.jinbi {
		color: #D73018;
	}
	.money {
		color: #333333;
	}
	span {
		margin-left: 10px;
		font-size: 14px;
	}
}
.ordermoney {
	padding: 15px 0;
}
.foot {
	position: fixed;
	z-index: 9999;
	background-color: #f5f5f5;
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 15px;
	box-sizing: border-box;
	font-size: 14px;
	left: 0;
	bottom: 0;
	.right {
		color: #D73018;
		font-weight: 900;
	}
	
}
</style>


<template>
  <div class="orderinfo">
    <div class="title">已取消</div>

    <div class="grid">
      <div class="grid2 wuliu">
        <div>
          <img src>
        </div>
        <div>
          <p>
            <label for>物流公司：</label>
            <span>百世汇通</span>
          </p>
          <p>
            <label for>物流单号：</label>
            <span>383837484859</span>
          </p>
        </div>
      </div>
      <div class="grid2 food">
        <div>
          <img src>
        </div>
        <div>
          <div class="grid2r">
            <p>这是您购买的一件商品名称</p>
            <p>*1</p>
          </div>
          <div class="sub">￥1000.00+500粮票</div>
        </div>
      </div>
    </div>

    <div class="grid">
      <div class="grid2 posi">
        <div>
          <img src alt>
        </div>
        <div class="address">
          <label>Ehowe</label>
          <span>18888888888</span>
          <div>上海 上海市 浦东新区 张江高科技园区 郭守敬路498号19号楼412室 (200135)</div>
        </div>
      </div>

      <div class="items">
        <div class="grid2lr">
          <div class="left">交易方式：</div>
          <div class="right">支付宝</div>
        </div>
        <div class="grid2lr">
          <div class="left">订单号：</div>
          <div class="right">8999070096</div>
        </div>
        <div class="grid2lr">
          <div class="left">下单时间：</div>
          <div class="right">2018-11-21 18:23:23</div>
        </div>
        <div class="grid2lr">
          <div class="left">付款时间：</div>
          <div class="right">2018-11-21 20:19:24</div>
        </div>
        <div class="grid2lr">
          <div class="left">买家留言：</div>
          <div class="right">速发货！！谢谢</div>
        </div>
      </div>

		<div class="grid2lr ordermoney">
          <div class="left">订单总额：</div>
          <div class="right style1" >
			  <img src="" alt="">
			  <span class="jinbi">300</span>
			  <span class="money">+￥60</span>
		  </div>
        </div>
    </div>

	<div class="foot">
		<div class="grid2lr">
          <div class="left">实付总额：</div>
          <div class="right">￥60</div>
        </div>
	</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>
